<template>
    <div :id="id" style="width: 33%; height: 300px;"></div>
</template>

<script>
import * as echarts from 'echarts';
export default {
  props: {
    title: {
      type: String,
      default: ''
    },
    id: {
      type: String,
      default: ''
    },
    dataList: {
      type: Array,
      default(){
        return []
      }
    }
  },
  data() {
    return {
      myChart: null
    }
  },
  mounted() {
    window.addEventListener("resize", this.resize);
  },
  beforeDestroy() {
    if(!this.myChart){
      return
    }
    window.removeEventListener("resize", this.resize);
    this.myChart.dispose()
  },
  watch: {
    dataList: {
      handler(val){
        this.initData()
      },
      deep: true
    }
  },
  methods: {
    initData() {
      var chartDom = document.getElementById(this.id);
      this.myChart = echarts.init(chartDom);
      var option;
      option = {
        title: {
          text: this.title,
          left: 'center'
        },
        tooltip: {
          trigger: 'item',
        },
        // color:['#000','#5470c6','#9A60B4','#ef6567', '#f9c956','#3BA272'], // 自定义饼状图的颜色
        series: [
          {
            type: 'pie',
            radius: '65%',
            center: ['50%', '50%'],
            selectedMode: 'single',
            data: this.dataList,
            label: {
                formatter: '{b} : {c} ({d}%)'
            },
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };

      option && this.myChart.setOption(option);
    },
    // 页面缩放
    resize() {
      this.myChart.resize();
    },
  }
}
</script>

<style lang="scss" scoped></style>